<template>
  <section>
    <div class="user-info">
      <div class="avatar">
        <img src="https://o5omsejde.qnssl.com/demo/test1.jpg" alt="avatar" style="border-radius: 50%">
      </div>
      <!--<div class="username">-->
        <!--NickName-->
      <!--</div>-->
      <div class="username" @click="doLogin">
        去登陆
      </div>
      <div class="tip">
        &nbsp;&nbsp;&nbsp;&nbsp;欢迎来到云网
      </div>
    </div>
    <div class="count">
      <grid :show-lr-borders=false>
        <grid-item>
          <p slot="label">10000</p>
          <p class="title">累计收益</p>
        </grid-item>
        <grid-item>
          <p slot="label">10000</p>
          <p class="title">余额</p>
        </grid-item>
        <grid-item link="/netcoin">
          <p slot="label">10000</p>
          <p class="title">云币</p>
        </grid-item>
      </grid>
    </div>
    <section class="menu">
      <group class="m-t-em">
        <cell title="个人资料" is-link link="/personalInfo">
          <span slot="icon" class="icon-personal">&#xeaf3;</span>
        </cell>
      </group>
      <group class="m-t-em">
        <cell title="我的矿机" is-link link="/mymine">
          <span slot="icon" class="icon-personal">&#xec6d;</span>
        </cell>
        <cell title="交易记录" is-link link="/tradelist">
          <span slot="icon" class="icon-personal">&#xec49;</span>
        </cell>
        <cell title="客服中心" is-link link="/servicecenter">
          <span slot="icon" class="icon-personal">&#xec3e;</span>
        </cell>
        <cell title="账户中心" is-link link="/account">
          <span slot="icon" class="icon-personal">&#xec2d;</span>
        </cell>
      </group>
      <group class="m-t-em">
        <cell title="我的推荐码" is-link link="/mycode">
          <span slot="icon" class="icon-personal">&#xec2f;</span>
        </cell>
        <cell title="我的团队" is-link link="/myteam">
          <span slot="icon" class="icon-personal">&#xec18;</span>
        </cell>
        <cell title="官方QQ群" is-link link="/qqqun">
          <span slot="icon" class="icon-personal">&#xec10;</span>
        </cell>
        <cell title="安全中心" is-link link="/safty">
          <span slot="icon" class="icon-personal">&#xebfb;</span>
        </cell>
        <cell title="公告中心" is-link link="/noticelist">
          <span slot="icon" class="icon-personal">&#xebe9;</span>
        </cell>
        <cell title="我的钱包" is-link link="/ondev">
          <span slot="icon" class="icon-personal">&#xebc2;</span>
        </cell>
      </group>
    </section>
  </section>
</template>

<script>
  import { Grid, GridItem, Group, Cell } from 'vux'
  export default {
    name: 'personal',
    components: {
      Grid, GridItem, Group, Cell
    },
    data () {
      return {
      }
    },
    methods: {
      doLogin () {
        this.$router.push({path: '/login'})
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-info {
    display: flex;
    background: -webkit-linear-gradient(left, #9cb1c4 , #809fbb); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right,  #9cb1c4, #809fbb); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,  #9cb1c4, #809fbb); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right,  #9cb1c4 , #809fbb); /* 标准的语法 */
    padding: 15px 15px 50px;
    align-items: center;
    color: #fff;
    .avatar {
      width: 60px;
      height: 60px;
      line-height: 1;
      font-size: 0;
      margin-right: 10px;
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
  .count {
    background-color: #fff;
    text-align: center;
    margin: -40px 15px 0;
    border-radius: 10px;
    .weui-grids:before {
      content: none!important;
    }
    .weui-grids:after {
      content: none!important;
    }
    .weui-grid:after {
      content: none!important;
    }
    .weui-grid:last-child:before {
      content: none!important;
    }
  }
  .menu {
    .weui-cell__hd {
      line-height: 1!important;
      font-size: 0;
    }
  }
</style>
